<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true"><block slot="backText" @click="nav">返回</block>
			<block slot="content">调查问卷</block>
		</cu-custom>
		
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in taball" :key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		
		<form v-if="TabCur == 0">
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[0].name }}
				</view>
			</view>
			<view style="height: 80upx;background-color: #fff;padding-left: 30upx;">
				<block v-for="(item,index) in describe[0].radio_group" :key="index">
					<text v-if="item.checked" style="margin-right: 20upx;color: #777;display: inline-block;">{{item.value}}</text>
				</block>
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[1].name }}
				</view>
			</view>
			<view style="height: 80upx;background-color: #fff;padding-left: 30upx;">
				<block v-for="(item,index) in describe[1].radio_group" :key="index">
					<text v-if="item.checked" style="margin-right: 20upx;color: #777;display: inline-block;">{{item.value}}</text>
				</block>
			</view>
			<view class="cu-form-group" style="color: #777;" v-if="describe[1].value1!='' && describe[1].value1!=undefined">
				其他运动经历: {{ describe[1].value1 }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[2].name }}
				</view>
			</view>
			<view style="height: 80upx;background-color: #fff;padding-left: 30upx;">
				<block v-for="(item,index) in describe[3].radio_group" :key="index">
					<text v-if="item.checked" style="margin-right: 20upx;color: #777;display: inline-block;">{{item.value}}</text>
				</block>
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[3].name }}
				</view>
			</view>
			<view style="height: 80upx;background-color: #fff;padding-left: 30upx;">
				<block v-for="(item,index) in describe[3].radio_group" :key="index">
					<text v-if="item.checked" style="margin-right: 20upx;color: #777;display: inline-block;">{{item.value}}</text>
				</block>
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[4].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[4].value }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[5].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[5].value }}
			</view>
			<view class="cu-form-group" style="color: #777;" v-if="describe[5].value1!='' && describe[5].value1!=undefined">
				{{ describe[5].value1 }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[6].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[6].value }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[7].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[7].value }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[8].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[8].value }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[9].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[9].value }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[10].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[10].value }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[11].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[11].value }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ describe[12].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ describe[12].value }}
			</view>
			
		</form>
		
		<form v-if="TabCur == 1">
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ assessment[0].name }}
				</view>
			</view>
			<view class="cu-form-group" style="color: #777;">
				{{ assessment[0].value }}
			</view>
			<view class="cu-form-group" style="color: #777;" v-if="assessment[0].value1!='' && assessment[0].value1!=undefined">
				{{ assessment[0].value1 }}
			</view>
			<view class="cu-form-group" style="border: none;">
				<view class="zt">
					{{ assessment[1].name }}
				</view>
			</view>
			<view style="background-color: #fff;padding-left: 30upx;padding-bottom: 30upx;">
				<block v-for="(item,index) in assessment[1].radio_group" :key="index">
					<text v-if="item.checked" style="margin-right: 20upx;color: #777;display: inline-block;">{{item.value}}</text>
				</block>
			</view>
			
			<view class="bai">
				<view class="jgsm">
					<view class="jg">
						结果说明
					</view>
					<view class="rg">
						对于一个或更多问题,如果你回答了是 : 
					</view>
					<view class="par-q" style="padding-bottom: 20upx;">
						在你进行体适能评价前应咨询医生, 告诉医生PAR-Q和你回答了"是"的问题。只要你遵守循序渐进的原则,就能参加你想参加的体力活动。 只是你需要控制体力活动在安全的范围内, 告诉医生你希望参加的体力活动, 听从TA的建议。 参与一个安全而有益的社区运动计划。
					</view>
				</view>
			</view>
			<view class="qq bold">
				我已经阅读、理解并完成了这份问卷，对于我的所有问题一问都得到了令我满意的问题。
			</view>
			
			<view style="width: 100%;background: #fff;padding-bottom: 100upx;">
				<image :src="assessment[2]" mode="widthFix" style="width: 750upx;"></image>
			</view>
		</form>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				describe:[],
				assessment:[],
				id:'',
				TabCur: 0, //默认tab选中项
				scrollLeft: 0,
				taball:[
					{
						name: '会员调查',
						index: 0,
					},
					{
						name: '风险评估',
						index: 1,
					},
				], 
			};
		},
		onLoad:function(e){
			if ( e.id ) {
				this.id = e.id
			}
			uni.showLoading()
			this.setAjax()
		},
		methods:{
			setAjax(){
				var data = {
					'id': this.id,
				}
				uni.request({
					url: 'https://jxjsservice.jxfit.cn/coach/members/getUserQuestionnaireSurvey',
					method: 'GET',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						let all = res.data.datas
						this.describe = JSON.parse(res.data.datas.describe)
						this.assessment = JSON.parse(res.data.datas.assessment)
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style>
	.cu-form-group+.cu-form-group {
	  border-top: none;
	}
	.zt{
		background: #ffffff;
	}
	
	.bai{
		background: #ffffff;
	}
	.jgsm{
		width: 90%;
		margin: auto;
		background: #fcfcfc;
		padding: 20upx;
	}
	.jg{
		font-size: 28upx;
		font-weight: 555;
		padding: 10upx 0 10upx 0;
		color: #0000ff;
	}
	.rg{
		padding: 10upx 0 10upx 0;
	}
	.par-q{
		color: #7f7f7f;
	}
	.qq{
		background: #ffffff;
		color: #5e5e5e;
		padding: 40upx;
		box-sizing: content-box;
	}
	/* 画布相关 */
	.ts {
			color: #FF485D;
			font-size: 30upx;
			height: 100upx;
			line-height: 100upx;
			padding-left: 20upx;
	}
</style>
